<template>
  <div class="infoTitle">问卷列表</div>
  <el-button style="float: right; margin-left: 5px" icon="el-icon-search" circle @click="searchBox"></el-button>
  <div class="search">
    <el-input
        type="text"
        placeholder="搜索问卷标题内容"
        v-model="text"
        maxlength="10"
        show-word-limit
        clearable
        @keyup.enter.native="searchBox"
        >
    </el-input>
  </div>

  <div class="sortBtn">
    <el-dropdown>
      <el-button size="small">
        <i class="el-icon-sort el-icon--left"></i>
        {{titles[0]}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="list1Click">{{ titles[1] }}</el-dropdown-item>
          <el-dropdown-item @click="list2Click">{{ titles[2] }}</el-dropdown-item>
          <el-dropdown-item @click="list3Click">{{ titles[3] }}</el-dropdown-item>
          <el-dropdown-item @click="list4Click">{{ titles[4] }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <div class="filterBtn">
    <el-dropdown>
      <el-button size="small">
        <i class="el-icon-sort el-icon--left"></i>
        {{filterList[0]}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="filter1Click">{{ filterList[1] }}</el-dropdown-item>
          <el-dropdown-item @click="filter2Click">{{ filterList[2] }}</el-dropdown-item>
          <el-dropdown-item @click="filter3Click">{{ filterList[3] }}</el-dropdown-item>

        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>



</template>

<script>
import { defineComponent, ref } from 'vue'
export default {
  name: "OperationBar",
  data() {
    return {
      titles: ['时间倒序', '时间正序', '时间倒序', '数量倒序', '数量正序'],
      filterList: ['筛选问卷', '已发布', '未发布', '全部问卷']
    }
  },
  setup() {
    return {
      text: ref(localStorage.getItem('search')),
      textarea: ref('')
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.titles[0] = '时间倒序'
      this.filterList[0] = '筛选问卷'
    },
    list1Click() {
      console.log('success');
      this.titles[0] = this.titles[1]
      let flag = 1
      this.$emit('sortclick', flag)
    },
    list2Click() {
      this.titles[0] = this.titles[2]
      let flag = 2
      this.$emit('sortclick', flag)
    },
    list3Click() {
      this.titles[0] = this.titles[3]
      let flag = 3
      this.$emit('sortclick', flag)

    },
    list4Click() {
      this.titles[0] = this.titles[4]
      let flag = 4
      this.$emit('sortclick', flag)
    },
    // 筛选
    filter1Click() {
      console.log('已发布');
      this.filterList[0] = this.filterList[1]
      const flag = 1
      this.$emit('filterclick', flag)
    },
    filter2Click() {
      console.log('未发布');
      this.filterList[0] = this.filterList[2]
      const flag = 2
      this.$emit('filterclick', flag)
    },
    filter3Click() {
      console.log('全部问卷')
      this.filterList[0] = this.filterList[3]
      const flag = 3
      this.$emit('filterclick', flag)
    },
    // 搜索
    searchBox() {
      console.log(this.text);
      this.$emit('searchboxevent', this.text)
    }
  }
}
</script>

<style scoped>
  .infoTitle {
    float: left;
    font-size: larger;
    font-style: normal;
    margin-bottom: 20px;
    alignment: left;
    vertical-align: center;
  }

  .sortBtn {
    float: right;
    margin-top: 4px;
  }

  .search {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .filterBtn {
    float: right;
    margin-top: 4px;
    margin-right: 20px;
  }
</style>